<template>
	<view class="content">
		<view class="empty" v-if="addrList.length == 0">
			<view>
				<image class="empty-img" src="../../static/default_address_none.png"></image>
			</view>
			<view>
				<view class="empty-text">{{msgDict.nocreate}}，<view class="btnAddGood" @click="btnAddAddr">
					{{msgDict.create}}
				</view></view>
				
				<!-- <button class="empty-btn" @click="onClickSee">去逛逛</button> -->
			</view>
			
		</view>
		<view v-else class="itemGroup" v-for="(item,index) in addrList" :key="index" >
		
		  <view class="itemChild" @click.stop="btnItemClick(index)">
		  	<view class="itemInfoDetail" >
		  		<view class="itemName">{{item.contract}}</view>
		  		<view class="itemIphone">{{item.phone}}</view>
		  		<!-- <view class="itemType" v-if="item.izDefault == '1'">{{msgDict.isDefault}}</view> -->
		  	</view>
			<view class="itemAddr">{{item.provice}}{{item.city}}{{item.county}}{{item.adress}}</view>
			<view class="itemBottom">
				
				<view class="itemEdit" @click.stop="onRightClickDelete('0',item.id,item.izDefault)">
					<uni-icons :type="item.izDefault == '1'?'checkbox-filled':'circle'" :color="item.izDefault == '1'?'#5360FF':'#ccc'" size="20"></uni-icons>
					<view class="lab2">{{msgDict.setDefault}}</view>
				</view>
				<view class="swipe-right" >
					<view class="itemEdit" @click.stop="btnItemEditClick(index)">
						<uni-icons type="compose" color="#888" size="20"></uni-icons>
						<view class="lab1">{{msgDict.modify}}</view>
					</view>
					<view class="itemEdit" @click.stop="onRightClickDelete('1',item.id,0)">
						<uni-icons type="trash" color="#888" size="16"></uni-icons>
						<view class="lab1">{{msgDict.delete}}</view>
					</view>
				</view>
			</view>
		  	
		  </view>	
		</view>
		<view class="btnGroup">
			<view class="btn showBtnBackColor" @click="btnAddAddr">
				{{msgDict.newAdd}}
			</view>
		</view>
	</view>
</template>

<script>
	import {addrList,delAddr,setDefault} from '../../api/index.js'
	export default {
		data() {
			return {
			addrList:[],
			iOSOrAndro:false,
			userId:undefined,
			isRefresh:true,
			isAllowBack:false,
			msgDict:{}
			}
	    },
		onLoad(option) {
			this.msgDict = getApp().globalData.$t('addrList');
			if(option.type){
				this.isAllowBack =true
			}
		
			this.userId = getApp().globalData.userId
			this.iOSOrAndro = getApp().globalData.iOSOrAndro
			
		},
		onPullDownRefresh() {
			this.addrLists();
		},
		onShow(){
			if (this.isRefresh) {
		    this.isRefresh =false;
			this.addrLists();
				
			}
		},
		methods: {
			async addrLists(){
				
				let {result} = await addrList({userId:this.userId});
			    this.addrList = result;
				uni.stopPullDownRefresh()
			},
			
			async NewdelAddr(addrId){
			
			  	try{
					
					let {data} = await delAddr({addressId:addrId,userId:this.userId});
					uni.showToast({
						title:this.msgDict.deleted,
						icon:'none'
					})
					this.addrLists();
					
				} catch(err) {
					console.log('我请求啦',err);
					uni.showToast({
						title:err.message,
						icon:'none'
					})
				} 
			},
			async NewsetDefault(addrId){
			
			  	try{
					
					let {data} = await setDefault({addressId:addrId,userId:this.userId});
					uni.showToast({
						title:this.msgDict.Modified,
						icon:'none'
					})
					this.addrLists();
					
				} catch(err) {
					console.log('我请求啦',err);
					uni.showToast({
						title:err.message,
						icon:'none'
					})
				} 
			},
			btnAddAddr(){
				uni.navigateTo({
					url:'../addAddr/addAddr'
				})
			},
			btnItemClick(index){
				
				if (this.isAllowBack) {
					let info = this.addrList[index];
					let getItem = {id:info.id,phone:info.phone,contract:info.contract,address:info.provice+info.city+info.county+info.adress,provice:info.provice}
				    uni.$emit('address', getItem);
				    uni.navigateBack();
					
				}
			},
			btnItemEditClick(index){
				let info = this.addrList[index];
				uni.navigateTo({
					url:'../addAddr/addAddr?item=' + encodeURIComponent(JSON.stringify(info))
				})
			},
			onRightClickDelete(sel,addrId,isDefault){
				
				if (sel == '0') {
					
					if (isDefault == '1') {
						
					return
						
					}
					
					
					//设置为默认
					this.NewsetDefault(addrId);
					
					
				} else{
					this.NewdelAddr(addrId);
					
				}
				
				
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #F8F9FD;
	}
.empty {

	margin-top: 200rpx;
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	// background: #F4F4F4;

.empty-img {
	margin-top: 45upx;
	width:300upx;
	height: 200upx;
}

.empty-text {
	margin-top: 10upx;
	font-size: 24upx;
	color: #ccc;
	display: flex;
	align-items: center;
	.btnAddGood{
		color: #DD524D;
		font-size: 25upx;
	}
}

	.empty-btn {
		margin-top: 24upx;
		width: 250upx;
		height: 70upx;
		font-size: 28upx;
		color: #FFFFFF;
		background-color: #DD524D;
	}
}
	   .itemGroup{
		  
		   padding-bottom: 10upx;
		   padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));  
		   padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
		   
		   
		   .itemChild{
			  
			   padding: 20rpx 30rpx 10rpx;
			   margin-bottom: 20rpx;
			   // border-bottom: 1rpx solid #f2f2f2;
			   background-color: #fff;
			   .itemInfoDetail{
				   display: flex;
				   flex-direction: row;
				   align-items: center;
				   color: #000;
				   font-weight: 400;
				   font-size: 26rpx;
				   
				   .itemIphone{
					   margin-left: 20rpx;
				   }
				   .itemType{
					   color: #fff;
					   background-color: #dd524d;
					   height: 32rpx;
					   width: 60rpx;
					   line-height: 32rpx;
					   border-radius: 8rpx;
					   margin-left: 20rpx;
					   font-size: 18rpx;
					   text-align: center;
					   
				   }
			   }
			   .itemAddr{
				   font-size: 30rpx;
				   color: #333;
				   font-weight: 300;
				   margin-top: 20rpx;
			   }
			   .itemBottom{
				   margin-top: 30rpx;
				   display: flex;
				   justify-content: space-between;
				   
				   .swipe-right {
				   		/* width: 100%; */
				   		display: flex;
				   	    flex-direction: row;
						justify-content: space-between;
						width: 220rpx;
						align-items: center;
				   
				   }
				   .uni-icons{
					   margin-right: 6rpx;
				   }
				   .itemEdit{
					  
					   display: flex;
					   color: #333333;
					   font-size: 24rpx;
					   font-weight: 400;
					   align-items: center;
					   .lab2{
						   font-size: 26rpx;
						   
					   }
				   }
			   }
		   }
	   }
	  
	   .btnGroup{
		   position: fixed;
		   bottom: 0;
		   left: 0;
		   width: 750rpx;
		   height: 160rpx;
		   padding-bottom: 10upx;
		   padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));  
		   padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
		   .btn{
			   color: #fff;
			   background-color: #dd524d;
			   height: 100rpx;
			   line-height: 100rpx;
			   border-radius: 50rpx;
			   margin: 20rpx 40rpx;
			   font-size: 32rpx;
			   text-align: center; 
		   }
	   }
	
</style>
